<template>
  <div class="my-data">
    <div class="my-data-detail">
      <!-- 导航标签 -->
      <div class="my-data-detail-head">
        <p class="my-data-detail-head-nav">
          <a href="javascript:;" @click.stop="click2ReturnAdminData"> 所有作品 </a>
          <el-icon><caret-right /></el-icon>
          <a href="javascript:;">{{ curSiteData && curSiteData.name ? curSiteData.name : '' }}</a>
        </p>
      </div>

      <!-- tabs 分页 -->
      <div class="my-data-content-con">
        <!-- 分 tab 管理：表单数据/数据分析/推广监测/推广标识生成 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="表单数据" name="first">
            <!-- 表单数据 -->
            <FormData :site_id="curSiteId"></FormData>
          </el-tab-pane>

          <el-tab-pane label="数据分析" name="second">
            <!-- 数据分析 -->
            <DataAnalysis :site_id="curSiteId"></DataAnalysis>
          </el-tab-pane>

          <el-tab-pane label="推广监测" name="third">
            <!-- 推广监测 -->
            <PopularizeCheck :site_id="curSiteId" :active="activeName"></PopularizeCheck>
          </el-tab-pane>

          <el-tab-pane label="推广标识生成" name="fourth">
            <!-- 推广标识生成 -->
            <PopularizeMark :site_id="curSiteId"></PopularizeMark>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import PopularizeMark from '@/views/child/admin/adminData/PopularizeMark.vue';
  import FormData from '@/views/child/admin/adminData/FormData.vue';
  import DataAnalysis from '@/views/child/admin/adminData/DataAnalysis.vue';
  import PopularizeCheck from '@/views/child/admin/adminData/PopularizeCheck.vue';
  import {mapState, mapActions} from 'vuex'

  export default {
    setup () {
      return {
        pageSize: 20,
        curSiteId: '',

        // 分 tab 管理：表单数据/数据分析/推广监测/推广标识生成
        activeName: 'first',  // first / second / third / fourth
      }
    },
    computed: {
      ...mapState({
        lists: state => state.user.myLists,
        curSiteData: state => state.user.mySite4Data,
      }),
    },
    components: {
      PopularizeMark,
      FormData,
      DataAnalysis,
      PopularizeCheck,
    },
    beforeMount() {
      // site_id
      this.curSiteId = this.$route.query.site_id;

      // 获取 站点数据
      this.getMySite4Data({
        site_id: this.curSiteId,
      });

      // 获取 站点数据（目的：1. 用于判断获取 isLottery）
      this.getSiteData({
        item: {
          site_id: this.curSiteId,
        },
        isTempPreviewUrl: false,
      });
    },
    methods: {
      ...mapActions({
        getMyLists: 'user/getMyLists',
        getSiteData: 'user/getSiteData',
        getMySite4Data: 'user/getMySite4Data',
      }),
      click2ReturnAdminData() {
        // 返回 数据统计 首页
        // window.history.go(-1);  // 不能保存表单数据和分页数据
        // TODO：search 搜索结果加上
        const curPage = this.$route.query.page || 1;
        this.$router.push({ path: `/admin/data`, query: { page: curPage } });
      },
      handleClick() {
        // do nothing
        // tab, event
        // console.log(tab, event);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .my-data-detail-head-nav {
    padding: 0 15px;

    a:first-child:hover {
      color: #409EFF;
      cursor: pointer;
    }
  }
</style>
